<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>gil的html学习</title>
  </head>
  <body>
    <header>
      网站头部
      <nav>导航栏</nav>
      <!-- 这是导航栏 -->
    </header>
    <!-- 这是页眉 -->
    <main>
      主要内容<br>
      <!-- 这是主要内容 -->
      <input type="text" placeholder="输入你想要的东西" /><br />
      <!-- 这是输入框，用于用户输入文本 -->
      <input type="password" placeholder="Enter text here" /><br />
      <!-- 这是输入框，用于用户输入文本 -->
      <h1>选择你想学习的语言</h1>
      <input name="language" value="html" type="checkbox" checked id="htmltag" />
      <!-- value的值就是给服务器的值，checked表示默认选中 -->
      <label for="htmltag"><html>html</label>
      <!-- 这是标签，用于把id和for关联起来 -->
      <input name="language" type="checkbox" />css
      <input name="language" type="checkbox" />js  <br>
      <!-- 这是复选框，用于选择多项 -->
      <input type="radio" /><br /> 
      <!-- 这是单选框，用于选择一项 -->
      <input type="file" /><br />
      <textarea name="message" id=""></textarea><br>
      <!-- 这是文本域，用于输入多行文本 -->
      <select name="选项" id="select">
        <option value="1">选项1</option>
        <option value="2">选项2</option>  
        <option value="3">选项3</option>
      </select><br>
      <button>按钮</button>
      <!-- 这是一个按钮ceshi-->






      <article>文章内容</article>
      <!-- 这是一个文章内容 -->
      <section>
        文档部分
        <h1>Hello World!</h1>
        <!-- 这是标题 -->
        <h2>这是二级标题123</h2>
        <h3>这是三级标题</h3>
        <h4>这是四级标题</h4>
        <h5>这是五级标题</h5>
        <h6>这是六级标题</h6>
        <p>
          这是我的第一个段落。正在学习中，好烦啊啊，我正在学习<em>html</em>的说明文档。
        </p>
        <!-- 这是一个段落，里面包含了强调的文本 -->
        <em>This is an example HTML document.用来表示强调的文本</em><br />
        <!-- 这是一个简单的HTML文档，用来表示强调的文本 --><!-- 这是换行符 -->
        <ins>This text has been inserted.用来表示插入的文本</ins><br />
        <!-- 这是一个插入的文本 -->
        <del>This text has been deleted.用来表示删除的文本</del><br />
        <!-- 这是一个删除的文本 -->
        <sup>This text is superscripted.用来表示上标的文本</sup><br />
        <!-- 这是一个上标的文本 -->
        <sub>This text is subscripted.用来表示下标的文本</sub><br />
        <!-- 这是一个下标的文本 -->
        <strong>This text is strong.用来表示加粗的文本</strong><br />
        <!-- 这是一个加粗的文本 -->
        <small>This text is small.用来表示小号的文本</small><br />
        <!-- 这是一个小号的文本 -->
        <big>This text is big.用来表示大号的文本</big><br />
        <!-- 这是一个大号的文本 -->
        <cite>This is a citation.用来表示引用的文本</cite><br />
        <!-- 这是一个引用的文本 -->
        <code>This is some code.用来表示代码的文本</code><br />
        <!-- 这是一个代码的文本 -->
        <kbd>This is keyboard input.用来表示键盘输入的文本</kbd><br />
        <!-- 这是一个键盘输入的文本 -->
        <samp>This is sample output.用来表示示例输出的文本</samp><br />
        <!-- 这是一个示例输出的文本 -->
        <var>x</var> = <var>y</var> + <var>z</var><br />
        <!-- 这是一个变量的文本 -->
        <dfn>This is a definition.用来表示定义的文本</dfn><br />
        <!-- 这是一个定义的文本 -->
        <abbr title="abbreviation">abbr</abbr><br />
        <!-- 这是一个缩写的文本 -->
        <address>123 Main St, Anytown USA</address>
        <br />
        <!-- 这是一个地址的文本 -->
        <bdo dir="rtl">这是一个从右到左的文本.</bdo><br />
        <!-- 这是一个从右到左的文本 -->
        <blockquote>用来表示引用的文本</blockquote>
        <br />
        <!-- 这是一个块引用的文本 -->
        <span>This is a span.这是用来表示文本的span标签。</span><br />
        <!-- 这是一个span标签 -->
      </section>
      <!-- 这是一个文档部分的标签 -->
      <aside>侧边栏</aside>
      <!-- 这是侧边栏 -->
      <div>通用标签</div>
      <!-- 这是一个通用标签，最最常用的标签 -->

      <u>This is underlined.</u><br />
      <!-- 这是下划线 -->

      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>
      <!-- 这是一个无序列表 -->
      <ol>
        <li>24343</li>
        <li>31233</li>
        <li>231234</li>
      </ol>
      <!-- 这是一个有序列表 -->
      <img
        src="https://img1.baidu.com/it/u=3727430941,3499095021&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1731690000&t=bfed2c2f2e13e861419d322f693d7f37"
        alt="猫猫"
        id="catImage"
      />
      <br />
      <img
        src="./wp-content/themes/twentytwentythree/screenshot.png"
        alt="本地图片"
        width="600"
        height="500"
      />
      <!-- 这是一个图片，设置为本地相对路径图片，不同层级的路径，开头不一样 -->

      <video src="https://www.bilibili.com/video/BV1aa4y1X73W?t=121.6"></video>
      <!-- 这是一个视频，暂时没有视频，地址可以直接在vscode中复制，不会有window地址斜杆反过来的问题 -->
      <audio src=""></audio>
      <!-- 这是一个音频，暂时没有音频，地址可以直接在vscode中复制，不会有window地址斜杆反过来的问题 -->
      <canvas>这是画布</canvas>
      <!-- 这是一个画布，单独不会显示，但是可以用js画图 -->

      <form action="" method="get"></form>
      <!-- 这是一个表单，暂时没有表单，可以用js实现表单功能 -->
    </main>
    <!-- 这是主要内容 -->
    <footer>
      页脚
      <hr>水平线</hr><br>
      <!-- 这是一个水平线 -->
      
      
      <a href="https://www.google.com"target="_blank" title="去谷歌">go to google</a><br />
      <!-- 这是链接，指向Google网站,在新标签页打开 -->
      <!-- 这是注释，按ctrl+l可以快速注释掉一行代码 -->
      <a href="index.html">跳转index</a><br>
      <!-- 这是跳转到index.html的链接，默认是当前页面打开 -->
      <a href="#catImage">猫猫</a>
      <!-- 这是跳转到id为catImage的图片的链接 -->

    </footer>
    <!-- 这是页脚 -->
  </body>
</html>
